window.addEventListener('load', function() {
    let previewImg = this.document.querySelector('.preview_img');
    let mask = this.document.querySelector('.mask');
    let big = this.document.querySelector('.big');
    previewImg.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    let move = function(e) {
        let maskX = e.pageX - previewImg.offsetLeft - mask.offsetWidth / 2;
        let maskY = e.pageY - previewImg.offsetTop - mask.offsetHeight / 2;
        //let maskMax = 
        if (maskX < 0) {
            maskX = 0;
        } else if (maskX > previewImg.offsetWidth - mask.offsetWidth) {
            maskX = previewImg.offsetWidth - mask.offsetWidth;
        }
        if (maskY < 0) {
            maskY = 0;
        } else if (maskY > previewImg.offsetHeight - mask.offsetHeight) {
            maskY = previewImg.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        let bigImg = document.querySelector('.bigImg');
        let big = document.querySelector('.big');
        let maskMax = previewImg.offsetHeight - mask.offsetHeight;
        let bigMax = bigImg.offsetHeight - big.offsetHeight;
        bigImg.style.left = -maskX * bigMax / maskMax + 'px';
        bigImg.style.top = -maskY * bigMax / maskMax + 'px';
    };
    previewImg.addEventListener('mousemove', move);
    previewImg.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
})